<template>
  <div class="container">
    <!-- 校历 -->
    <div class="search">
      <span>学期：</span>
      <el-button
        @click="openSemesterList = true"
        type="text"
        style="width: 250px; text-align: left;"
      >
        <span>{{ semesterSelect.name }}</span>
      </el-button>
      <!-- 学期筛选 -->
      <el-dialog title="选择学期" :visible.sync="openSemesterList">
        <el-input placeholder="请输入关键字" v-model="semesterKeyword">
          <template slot="prepend">学期名</template>
          <el-button slot="append" icon="el-icon-search" @click="searchSemester"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="semesterSelect">
          <el-radio
            v-for="(semester, index) in semesterList"
            :key="'semester' + index"
            :label="semester"
          >{{ semester.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="semesterSelect = ''">清 空</el-button>
          <el-button type="primary" @click="semesterSelected(semesterSelect.id)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 校历详情 -->
    <div class="details">
      <schoolCalendarDetails :schoolCalendar="schoolCalendar" :semesterDay="semesterDay" />
    </div>
  </div>
</template>
<script>
import schoolCalendarDetails from "@/views/education-instructionalMatters/school-calendar/details";
import { getAllSemester } from "@/api/semester";

export default {
  name: "schoolCalendar",
  data() {
    return {
      schoolCalendar: [], //校历信息

      semesterList: [], //学期列表
      semesterSelect: "", //选择的学期
      openSemesterList: false, //显示学期选择对话框
      semesterKeyword: "", //搜索学期关键词
      semesterDay: new Date() //传给子组件的学期日期信息
    };
  },
  components: {
    schoolCalendarDetails
  },
  created() {
    //本学期的校历
    this.getSchoolCalendar();

    // 获取学期列表
    this.getAllSemester();
  },
  methods: {
    //获取本学期的校历
    getSchoolCalendar() {
      let year = new Date().getFullYear(); //年
      let month = new Date().getMonth(); //月
      let val;
      if (month > 8) {
        //第一学期，年份今年-明年-第一学期   /*拼接出学期的id字符串*/
        val = year.toString() + (year + 1).toString() + "01";
      } else {
        // 第二学期，年份上一年-今年-第二学期
        val = (year - 1).toString() + year.toString() + "02";
      }
      //选择该学期的校历
      this.semesterSelected(val);
    },

    // 获取学期列表
    getAllSemester() {
      getAllSemester().then(res => {
        this.tableTotal = res.data.semesterList.length;
        this.semesterList = res.data.semesterList;
      });
    },

    //关键词搜索学期
    searchSemester() {},

    //选择学期,把校历切回指定学期,关闭对话框
    semesterSelected(val) {
      let semester = val;
      if (semester === "2019202002") {
        //学期的第一天
        this.semesterDay.setFullYear(2020);
        this.semesterDay.setMonth(1);
        this.semesterDay.setDate(23);

        this.schoolCalendar = [
          { date: "2020-7-10", things: "上课" },
          { date: "2020-7-11", things: "休" },
          { date: "2020-7-12", things: "休" },
          { date: "2020-7-13", things: "上课" },
          { date: "2020-7-14", things: "暑假" }
        ];
      }
      if (semester === "2020202101") {
        //学期的第一天
        this.semesterDay.setFullYear(2020);
        this.semesterDay.setMonth(8);
        this.semesterDay.setDate(1);

        this.schoolCalendar = [
          { date: "2020-9-1", things: "上课" },
          { date: "2020-9-2", things: "休" },
          { date: "2020-9-3", things: "休" },
          { date: "2020-9-4", things: "上课" },
          { date: "2020-9-5", things: "暑假" }
        ];
      }
      if (semester === "2020202102") {
        //学期的第一天
        this.semesterDay.setFullYear(2021);
        this.semesterDay.setMonth(1);
        this.semesterDay.setDate(20);

        this.schoolCalendar = [
          { date: "2021-2-1", things: "上课" },
          { date: "2021-2-2", things: "休" },
          { date: "2021-2-3", things: "休" },
          { date: "2021-2-4", things: "上课" },
          { date: "2021-2-5", things: "暑假" }
        ];
      }

      this.openSemesterList = false;
    }
  }
};
</script>
<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
.search {
  margin: auto;
}
.details {
  text-align: center;
  margin: auto;
}
</style>
